<template>
  <div class="index_vue_page">
    <header class="index_head flex-align">
        <img class="logo" src="https://axure-file.lanhuapp.com/a4aa0417-c5fa-42be-a70b-1987f30d3059__9aa78c02a00a63af3428336e46fc6a8e.png" alt="">
    </header>
    <main class="main_inner">
        <TemplateMoudel @getTotal="getTotal" :pagination="pagination"></TemplateMoudel>
    </main>

        <div v-if="active==1" class="pagination flex-end" >
            <el-pagination
                background
               @current-change="handleCurrentChange"
                :page-size="pagination.size"
                :page-count="pagination.current"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <div v-else class="pagination flex-end">
            <el-pagination
                background
               @current-change="handleCurrentChange"
                :page-size="pagination.size"
                :page-count="pagination.current"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
  </div>
</template>

<script>
import TemplateMoudel from '@/components/TemplateMoudel/TemplateMoudel'
export default {
 components:{TemplateMoudel},
 data() {
    return {
        pagination:{
            current:1,
            size:10,
        },
        pagination2: {
            current: 1,
            size: 10,
        },
        total:0,
        active:1,
    }
 },
 created(){
 },
 methods:{
   getTotal(e){
        console.log(e);
        this.total=Number(e.total)
        this.active=e.active
   },
   handleCurrentChange(e){
       this.pagination.current=e
   },
 }
}
</script>

<style lang="scss" scoped>
.index_vue_page{
    background: rgba(232, 234, 237, 1);
    height: 100vh;
}
.index_head{
    width: 100%;
    height: 60px;
    background: rgba(87, 128, 234, 1);
    .logo{
        width: 120px;
        object-fit: contain;
        margin-left: 100px;
    }
}
.main_inner{
    background: #fff;
    width: 96%;
    border-radius: 12px;
    height: calc(100vh - 170px);
    margin: auto;
    margin-top: 35px;
    overflow-y:auto;
    padding: 30px;
}
.pagination{
    background: #fff;
    width: 96%;
    border-radius: 6px;
     margin: auto;
    padding: 10px;
    margin-top: 10px;
}
</style>
